<!--
<template>
  <div class="homeContainer">
&lt;!&ndash;    <chart ref="chart" :key="Math.random()"></chart>&ndash;&gt;
  </div>
</template>
<script>
//import chart from '@/views/charts/client/clientOrderRadarChart'

export default {
  name: 'home',
 // components: {chart},
  mounted() {
    this.$nextTick(() => {
      this.$refs.chart.init()
    })
  }
}
</script>

<style scoped>
.homeContainer {
  width: 100%;
  height: calc(100vh - 104px);
}
</style>
-->

<template>
  <div class="dashboard-editor-container" style="overflow-y: auto">

    <div style="margin-bottom: -28px;margin-top: -28px">
      <el-form :inline="true" :model="dataForm"  style="float: top" @submit.native.prevent>
        <el-form-item>
          <el-input placeholder="产品编号搜索"  v-model="dataForm.productNo" clearable @keyup.enter.native.prevent="searchProductNo" ></el-input>

        </el-form-item>
        <el-form-item>

          <link-label ref="linkLabel" :routerName="property.routerName"
                      :searchObj="property.searchKey"
                      label="查询产品"
          ></link-label>

        </el-form-item>
      </el-form>

    </div>

    <panel-group-yesterday @handleSetLineChartData="handleSetLineChartData"   :chart-data="panelGroupYesterdayData"/>

    <panel-group-today @handleSetLineChartData="handleSetLineChartData" :chart-data="panelGroupTodayData" />

    <panel-group-average @handleSetLineChartData="handleSetLineChartData" :chart-data="panelGroupAverageData" />

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart  :chart-data="lineChartData"   ref="lineChartData"/>
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart :chart-data="lineChartData"  ref="barChart"/>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <span style="color: #626b7d">产品销售排行(万/只)</span>
          <rank :chart-data="leaveStorageTopRankData" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <span style="color: #626b7d">待生产完成克重分布图(万/只)</span>
          <raddar-chart-by-order-weight ref="raddarChartByOrderWeight"  :chart-data="raddarChartByOrderWeightData"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <span style="color: #626b7d">产品库存排行(只)</span>
          <rank :chart-data="productStorageTopRankData"  />
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
        <div class="chart-wrapper">
          <span style="color: #626b7d">原料使用分析</span>
          <stacked-bar />
        </div>
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
        <div class="chart-wrapper">
          <span style="color: #626b7d">原料使用占比</span>
          <stacked-bar-variation />
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
        <div class="chart-wrapper" style="height: 390px">
          <span style="color: #626b7d">运营统计</span>
          <bar-label-rotation />
        </div>
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
        <div class="chart-wrapper" >
          <span style="color: #626b7d">运营环比</span>
          <mix-line-bar></mix-line-bar>
        </div>

      </el-col>
    </el-row>

    <!--    甘特图-->
    <el-row :gutter="32">
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 24}" :xl="{span: 24}" style="padding-right:8px;margin-bottom:30px;">
        <div class="chart-wrapper" style="padding-bottom: 20px">
          <gantt />
        </div>
      </el-col>
    </el-row>

    <!--    BarLabelRotation.vue-->

    <!--    -->
    <el-row :gutter="8">
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
        <transaction-table />
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
        <!--        <todo-list />-->
        <transaction-table-order-statistical-analysis />
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
        <box-card />
      </el-col>
    </el-row>




  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'
import PanelGroupToday from './components/PanelGroupToday'
import LineChart from './components/LineChart'
import RaddarChart from './components/RaddarChart'
import RaddarChartByOrderWeight from './components/RaddarChartByOrderWeight.vue'
import TransactionTableOrderStatisticalAnalysis from './components/TransactionTableOrderStatisticalAnalysis.vue'

import PieChart from './components/PieChart'
import BarChart from './components/BarChart'
import TransactionTable from './components/TransactionTable'
import TodoList from './components/TodoList'
import BoxCard from './components/BoxCard'
import PanelGroupYesterday from './components/PanelGroupYesterday.vue'
import Rank from './components/Rank.vue'
import PanelGroupAverage from './components/PanelGroupAverage'
import StackedBar from './components/StackedBar'
import {mRequest} from '@/utils/request'
import StackedBarVariation from '@/views/common/components/StackedBarVariation'
import Gantt from '@/views/common/gantt'
import BarLabelRotation from '@/views/common/components/BarLabelRotation.vue'
import MixLineBar from '@/views/common/components/MixLineBar'
import LinkLabel from '@/views/common/linkLabel'

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'DashboardAdmin',
  components: {
    LinkLabel,
    MixLineBar,
    BarLabelRotation,
    Gantt,
    StackedBarVariation,
    PanelGroupAverage,
    PanelGroupYesterday,
    PanelGroup,
    PanelGroupToday,
    LineChart,
    RaddarChart,
    RaddarChartByOrderWeight,
    TransactionTableOrderStatisticalAnalysis,
    PieChart,
    BarChart,
    TransactionTable,
    TodoList,
    Rank,
    StackedBar,
    BoxCard
  },
  computed: {
    property() {
      return {
        routerName: 'product-productinfo',
        searchKey: {'productNo': {value: this.dataForm.productNo}}

      }
    }
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis,
      panelGroupYesterdayData: {
        'putInStorageProductCount': 0,
        'leaveProductCount': 0,
        'finishOrderDetailCount': 0,
        'finishOrderProofingCount': 0,
        'orderProofingCount': 0,
        'orderDetailCount': 0,
      },
      panelGroupTodayData: {
        'putInStorageProductCount':0,
        'countOrderByGreaterThanMonth':0,
        'notProductionOrderDetailCount':0,
        'processingOrderDetailCount':0,
        'todayOrderDetail':0,
        'leaveProductCount':0,
      },
      panelGroupAverageData:{
        'putInStorageProductTunCount':0,
        'leaveProductTunCount':0,
        'notProductionCount':0,
        'processingOrderDetailCount':0,
        'todayOrderDetail':0,
        'leaveProductCount':0,
      },
      raddarChartByOrderWeightData: {
        orderProductNumberCount: [],
        xAxisList: []
      },
      leaveStorageTopRankData: {
        xAxisList:[],
        yAxisDataList:[]
      },
      productStorageTopRankData: {
        xAxisList:[],
        yAxisDataList:[]
      },
      searchProductNoKey: '',
      dataForm: {
        dateRange: '',
        productNo: ''
      },
      propertyTest:{
        routerName: 'product-productinfo',
        searchKey: {'productNo':{value:'1234'} }

      },
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            picker.$emit('pick',  [start, end])
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(end.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近半年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      }

    }
  },
  mounted () {
    let _this = this;
    _this.getRecentProductionDate()
    _this.getPanelGroupToday()
    _this.getPanelGroupYesterday()
    _this.getOrderSalesByProductWeightRange()
    _this.getLeaveStorageTopRank()
    _this.getProductStorageTopRank()
  },

  methods: {
    searchProductNo(e) {
      e.preventDefault(); // 阻止默认行为
      this.$refs.linkLabel.$el.click();

    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },
    async getRecentProductionDate() {
      const params = {}
      await mRequest('statisticsApi/getRecentProductionDate', params, (res) => {
        this.lineChartData.xAxisList = this.R.pathOr([], ['data', 'xAxisList'], res.data)
        this.lineChartData.expectedData = this.R.pathOr([], ['data', 'putInStorageTonneList'], res.data)
        this.lineChartData.orderData = this.R.pathOr([], ['data', 'newOrderDetailCountNumberList'], res.data)
        this.lineChartData.proofingData = this.R.pathOr([], ['data', 'newOrderProofingCountList'], res.data)
        this.lineChartData.finishOrderData = this.R.pathOr([], ['data', 'finishOrderDetailCountNumberList'], res.data)
        this.lineChartData.finishOrderData = this.R.pathOr([], ['data', 'finishOrderDetailCountNumberList'], res.data)
        this.lineChartData.actualData = this.R.pathOr([], ['data', 'leaveProductTonneList'], res.data)
        this.lineChartData.leaveProductSumNumberList = this.R.pathOr([], ['data', 'leaveProductSumNumberList'], res.data)
        this.lineChartData.putInStorageSumNumberList = this.R.pathOr([], ['data', 'putInStorageSumNumberList'], res.data)
        this.lineChartData.weightIngredientTonneData = this.R.pathOr([], ['data', 'weightIngredientTonneCountList'], res.data)


        /*          this.$refs.PanelGroup.initChart();
                  this.$refs.RaddarChart.initChart();
                  this.$refs.PieChart.initChart();*/
        this.panelGroupAverageData.putInStorageProductTunCount = this.R.sum(this.lineChartData.expectedData)
        this.panelGroupAverageData.leaveProductTunCount = this.R.sum(this.lineChartData.actualData)
        this.panelGroupAverageData.weightIngredientTonneCount = this.R.sum(this.lineChartData.weightIngredientTonneData)


        this.$refs.lineChartData.initChart(this.lineChartData)
        this.$refs.barChart.initChart(this.lineChartData)

      })
    },


    getPanelGroupToday() {
      const params = {}
      mRequest('statisticsApi/getPanelGroupToday',params,(res)=>{
        this.panelGroupTodayData.putInStorageProductCount=this.R.pathOr([], ['data', 'putInStorageProductCount'], res.data)
        this.panelGroupTodayData.countOrderByGreaterThanMonth=this.R.pathOr([], ['data', 'countOrderByGreaterThanMonth'], res.data)
        this.panelGroupTodayData.notProductionOrderDetailCount=this.R.pathOr([], ['data', 'notProductionOrderDetailCount'], res.data)
        this.panelGroupTodayData.todayOrderDetail=this.R.pathOr([], ['data', 'todayOrderDetail'], res.data)
        this.panelGroupTodayData.processingOrderDetailCount=this.R.pathOr([], ['data', 'processingOrderDetailCount'], res.data)
        this.panelGroupTodayData.leaveProductCount=this.R.pathOr([], ['data', 'leaveProductCount'], res.data)

        //    this.$refs.barChart.initChart(this.lineChartData);

      })
    },
    getPanelGroupYesterday() {
      const params = {}
      mRequest('statisticsApi/getPanelGroupYesterday',params,(res)=>{
        this.panelGroupYesterdayData.putInStorageProductCount=this.R.pathOr([], ['data', 'putInStorageProductCount'], res.data)
        this.panelGroupYesterdayData.finishOrderDetailCount=this.R.pathOr([], ['data', 'finishOrderDetailCount'], res.data)
        this.panelGroupYesterdayData.finishOrderProofingCount=this.R.pathOr([], ['data', 'finishOrderProofingCount'], res.data)
        this.panelGroupYesterdayData.leaveProductCount=this.R.pathOr([], ['data', 'leaveProductCount'], res.data)
        this.panelGroupYesterdayData.orderProofingCount=this.R.pathOr([], ['data', 'orderProofingCount'], res.data)
        this.panelGroupYesterdayData.orderDetailCount=this.R.pathOr([], ['data', 'orderDetailCount'], res.data)

        //    this.$refs.barChart.initChart(this.lineChartData);

      })
    },

    getOrderSalesByProductWeightRange() {
      const params = {}
      mRequest('statisticsApi/getOrderSalesByProductWeightRange',params,(res)=>{
        this.raddarChartByOrderWeightData.xAxisList=this.R.pathOr([], ['data', 'xAxisList'], res.data)
        this.raddarChartByOrderWeightData.orderProductNumberCount=this.R.pathOr([], ['data', 'orderProductNumberCount'], res.data)

        console.log('orderProductNumberCount  '+this.R.sum(this.raddarChartByOrderWeightData.orderProductNumberCount))

        this.panelGroupAverageData.notProductionCount = this.R.sum(this.raddarChartByOrderWeightData.orderProductNumberCount)

        this.$refs.raddarChartByOrderWeight.initChart(this.raddarChartByOrderWeightData);

      })
    },

    getProductStorageTopRank() {
      const params = {}
      mRequest('statisticsApi/getProductStorageTopRank',params,(res)=>{
        this.productStorageTopRankData.xAxisList=this.R.pathOr([], ['data', 'xAxisList'], res.data)
        this.productStorageTopRankData.yAxisDataList=this.R.pathOr([], ['data', 'productStorageTopRankCount'], res.data)

        //   this.$refs.productStorageTopRan.initChart(this.productStorageTopRankData);

      })
    },

    getLeaveStorageTopRank() {
      const params = {}
      mRequest('statisticsApi/getLeaveStorageTopRank',params,(res)=>{
        this.leaveStorageTopRankData.xAxisList=this.R.pathOr([], ['data', 'xAxisList'], res.data)
        this.leaveStorageTopRankData.yAxisDataList=this.R.pathOr([], ['data', 'leaveStorageTopRankCount'], res.data)

        //     this.$refs.leaveStorageTopRank.initChart(this.leaveStorageTopRankData);

      })
    },
  },

}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
  height: calc(100vh - 104px);
  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
